<template>
  <el-container style="height:100%; background:#000000
" >
    <el-aside width="asideWidth">
        <el-menu
          default-active="onrt"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          router
          :collapse="!collaposed"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="/About">选项1</el-menu-item>
              <el-menu-item index="/About2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="/About3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-2">
              <template slot="title">选项4</template>
              <el-menu-item index="/About5">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="/about6">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </el-menu-item>
          <el-menu-item index="/about7">
            <i class="el-icon-setting"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
        </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <button v-on:click="clickColl()">coll</button>

      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>

      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</template>


<!--隐藏显示动画及文字正常-->
<!--<template>-->
<!--  <el-row class="tac">-->
<!--    <button v-on:click="clickColl()">coll</button>-->

<!--    <el-col :span="12">-->
<!--      <h5>默认颜色</h5>-->
<!--        <el-menu-->
<!--          default-active="onrt"-->
<!--          class="el-menu-vertical-demo"-->
<!--          @open="handleOpen"-->
<!--          @close="handleClose"-->
<!--          router-->
<!--          :collapse="!collaposed"-->
<!--        >-->
<!--          <el-submenu index="1">-->
<!--            <template slot="title">-->
<!--              <i class="el-icon-location"></i>-->
<!--              <span>导航一</span>-->
<!--            </template>-->
<!--            <el-menu-item-group>-->
<!--              <template slot="title">分组一</template>-->
<!--              <el-menu-item index="/About">选项1</el-menu-item>-->
<!--              <el-menu-item index="/About2">选项2</el-menu-item>-->
<!--            </el-menu-item-group>-->
<!--            <el-menu-item-group title="分组2">-->
<!--              <el-menu-item index="/About3">选项3</el-menu-item>-->
<!--            </el-menu-item-group>-->
<!--            <el-submenu index="1-2">-->
<!--              <template slot="title">选项4</template>-->
<!--              <el-menu-item index="/About5">选项1</el-menu-item>-->
<!--            </el-submenu>-->
<!--          </el-submenu>-->
<!--          <el-menu-item index="/about6">-->
<!--            <i class="el-icon-menu"></i>-->
<!--            <span slot="title">导航二</span>-->
<!--          </el-menu-item>-->
<!--          <el-menu-item index="/about7">-->
<!--            <i class="el-icon-setting"></i>-->
<!--            <span slot="title">导航三</span>-->
<!--          </el-menu-item>-->
<!--        </el-menu>-->
<!--    </el-col>-->
<!--    <router-view></router-view>-->
<!--  </el-row>-->
<!--</template>-->



<script>
export default {
  name: "App",
  data() {
    return {
      collaposed: true,
      asideWidth: "10px"
    };
  },
  props: {
    menus: {
      type: Array,
      default: function() {
        return [];
      },
      required: false
    }
  },
  methods: {
    handleRouter(menu) {
      // 跳转路由
      this.$router.push(menu.route);
    },
    handleOpen(key, keyPath) {
      console.log("open");
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log("close");

      console.log(key, keyPath);
    },
    goTo(path) {
      // if (this.$route.path != path) {
      //   this.$router.replace(path);
      //   console.log(this.$route.path);
      //   console.log(path);
      // }
      // else
      //   console.log(path);
      this.$router.replace(path);
    },
    clickColl() {
      this.collaposed = !this.collaposed;
    }
  },
  mounted() {
    console.log(this.$route.path);
  }
};
</script>

<style scoped>
.el-col-12 {
  width: 15%;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

#app,
body,
html {
  height: 100%;
}

.el-footer {
  bottom: 0;
}

.el-aside {
  background-color: #000000;
  color: #333;
  /*text-align: center;*/
  /*line-height: 200px;*/
  line-height: 100%;
  height: 100%;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

/*body > .el-container {*/
/*  margin-bottom: 10px;*/
/*    height: 100%;*/
/*}*/

.el-container:nth-child(5),
.el-container:nth-child(6) {
  line-height: 260px;
}

/*.el-container:nth-child(5) .el-aside,*/
/*.el-container:nth-child(6) .el-aside {*/
/*  line-height: 260px;*/
/*}*/

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

/*隐藏文字*/
.el-menu--collapse  .el-submenu__title span{
  display: none;
}
/*隐藏 > */
.el-menu--collapse  .el-submenu__title .el-submenu__icon-arrow{
  display: none;
}

.el-menu {
  height: 100%;
}
.el-menu:not(.el-menu--collapse) {
  width: 200px;
}
</style>
